<template>
  <el-form
    ref="searchData"
    inline
    label-width="80px"
    size="mini"
    :model="searchData"
  >
    <el-form-item label="学科">
      <el-select v-model="searchData.subjectId" @change="getCatalogList">
        <el-option
          v-for="item in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级目录">
      <el-select v-model="searchData.catalogue">
        <el-option
          v-for="item in catalogList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="标签">
      <el-select v-model="searchData.tags">
        <el-option
          v-for="item in tagsList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="关键字">
      <el-input v-model="searchData.keyword" placeholder="根据题干搜索" />
    </el-form-item>
    <el-form-item label="试题类型">
      <el-select v-model="searchData.questionType">
        <el-option
          v-for="item in questionType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="难度">
      <el-select v-model="searchData.difficulty">
        <el-option
          v-for="item in difficulty"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="方向">
      <el-select v-model="searchData.direction">
        <el-option
          v-for="item in direction"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="录入人">
      <el-select v-model="searchData.entryClerk">
        <el-option
          v-for="item in entryList"
          :key="item.id"
          :label="item"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="题目备注">
      <el-input v-model="searchData.remarks" />
    </el-form-item>
    <el-form-item label="企业简称">
      <el-input v-model="searchData.enterpriseName" />
    </el-form-item>
    <el-form-item label="城市">
      <el-select
        v-model="searchData.province"
        class="city"
        @change="selectCity"
      >
        <el-option
          v-for="item in provinces"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="searchData.city" class="city">
        <el-option
          v-for="item in citys"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <div slot="default" style="float: right; transform: translateX(100px)">
        <el-button @click="cancelSearch">清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { citys, provinces } from '@/api/constants/city'
import { getsimpleApi } from '@/api/subjeckts'
import { difficulty, direction, questionType } from '@/api/constants/constants'
export default {
  props: {
    creatorList: {
      type: Array
    }
  },
  data() {
    return {
      searchData: {
        subjectId: '', // 学科
        catalogue: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键词
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        entryClerk: '', // 录入人
        remarks: '', // 题目备注
        enterpriseName: '', // 企业简称
        city: '', // 城市
        province: '' // 地区
      },
      subjectList: [], // 学科数据
      catalogList: [], // 二级目录列表
      tagsList: [], // 标签
      questionType, // 试题类型
      difficulty, // 难度
      direction, // 方向
      entryList: [], // 录入人列表
      provinces: [], // 地区列表
      citys: [], // 城市列表
      searchdata: {}
    }
  },
  created() {
    this.provinces = provinces()
    // 获取学科列表
    this.getCatalogList()
  },
  methods: {
    // 清空搜索框
    cancelSearch() {
      this.$emit('clearForm')
      this.searchData = {
        subjectId: '', // 学科
        catalogue: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键词
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        entryClerk: '', // 录入人
        remarks: '', // 题目备注
        enterpriseName: '', // 企业简称
        city: '', // 城市
        province: '' // 地区
      }
    },
    // 搜索
    search() {
      this.searchdata = {
        subjectID: this.searchData.subjectId,
        keyword: this.searchData.keyword
      }
      console.log(this.searchdata)
      this.$emit('searchQuestionsFn', this.searchdata)
    },

    // 二级联动
    selectCity() {
      this.searchData.city = ''
      this.citys = citys(this.searchData.province)
    },
    // 获取学科列表
    async getCatalogList() {
      const data = await getsimpleApi()
      //   console.log(data)
      this.subjectList = data
      this.entryList = [...new Set(this.creatorList)]
      console.log(this.entryList)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item--mini {
  width: 24%;
  .el-form-item__content {
    width: calc(100% - 80px);
    .el-select--mini {
      width: 100%;
    }
    .city {
      width: 48%;
      margin-right: 1%;
    }
  }
}
</style>
